<template>
  <div class="LogList pd-20">
    <el-input v-model="clientName"
              placeholder="请输入查询条件"
              clearable
              class="w-200"
              @clear="searchMethod"></el-input>
    <el-button type="primary"
               @click="searchMethod">查 询</el-button>
    <el-table stripe
              border
              :data="logData"
              height="720"
              style="width: 100%"
              class="mt-20">
      <el-table-column label="序号"
                       min-width="30"
                       type="index">
      </el-table-column>
      <el-table-column prop="client"
                       align="center"
                       label="客户端"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="loginId"
                       align="center"
                       label="登录ID"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="url"
                       align="center"
                       label="路径"
                       min-width="350">
      </el-table-column>
      <el-table-column prop="useTime"
                       align="center"
                       label="接口耗时/MS"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="requestTime"
                       align="center"
                       label="调用时间"
                       :formatter="formatterDate"
                       min-width="150">
      </el-table-column>
      <el-table-column label="操作"
                       min-width="100"
                       align="center">
        <template slot-scope="scope">
          <el-button type="info"
                     size="mini"
                     @click="openInfoDialog(scope.row)"
                     plain>查看详细信息
          </el-button>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="initTableData"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <el-dialog title="详细信息"
               :visible.sync="dialogVisible"
               width="30%">
      <el-form ref="form"
               :model="info"
               label-width="80px">
        <el-form-item label="查询参数">
          <el-input style="width: 100%"
                    type="textarea"
                    :rows="5"
                    readonly="readonly"
                    v-model="info.param"></el-input>
        </el-form-item>
        <el-form-item label="返回结果">
          <el-input style="width: 100%"
                    type="textarea"
                    :rows="5"
                    readonly="readonly"
                    v-model="info.result"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "LogList",
    data () {
      return {
        logData: [],
        state: '',
        clientName: '',
        infiniteId: 0,
        pageIndex: 0,
        pageSize: 20,
        info: {
          param: '',
          result: ''
        },
        dialogVisible: false
      }
    },
    methods: {
      initTableData ($state) {
        this.state = $state;
        let param = {
          clientName: this.clientName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.getDoctorLogList.url, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex += 1;
              this.logData = this.logData.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchMethod () {
        if (this.clientName.length == 0) {
          this.pageIndex = 0;
          this.logData = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.logData = [];
          this.initTableData(this.state)
        }
      },
      openInfoDialog (row) {
        this.info.param = row.param;
        this.info.result = row.result;
        this.dialogVisible = true
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.requestTime), 'yyyy-MM-dd hh:mm')
      }
    }
  }
</script>

<style scoped>
</style>
